<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<!--表单元素-->
		<!--所有包裹在.mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。 将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列。-->
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>用户名</label>
				<!--.clear 输入了内容可以通过一个按钮全部清除-->
				<input type="text" class="mui-input-clear" placeholder="请输入用户名" />
			</div>
			<div class="mui-input-row">
				<label>密码</label>
				<!--.password 输入的内容会被隐藏，右侧有个显示按钮-->
				<input type="password" class="mui-input-password" placeholder="请输入密码" />
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary">确认</button>
				<button type="button" class="mui-btn mui-btn-danger">取消</button>
			</div>
		</form>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			//mui在mui.init()中会自动初始化基本空间，但是动态添加的元素需要重新进行初始化
			mui('.mui-input-row input').input();
		</script>
	</body>

</html>